import { Component, Prop, Inject } from 'vue-property-decorator';

import { ConfigType, ListViewContext, includes } from '../../vendors/handie';
import { FilterDescriptor } from '../../vendors/handie/types/input';

import BaseHeadlessWidget from '../base/Base';

@Component
export default class FilterHeadlessWidget<ValueType = any> extends BaseHeadlessWidget {
  @Inject({ from: 'viewContext', default: null })
  protected readonly viewContext!: ListViewContext;

  @Prop({ type: Object, default: () => ({}) })
  protected readonly filter!: FilterDescriptor;

  protected get config(): ConfigType {
    return this.filter.config || {};
  }

  protected get showValidationRulesAsNative(): boolean {
    return this.getCommonBehavior('filter.showValidationRulesAsNative', false);
  }

  protected getPlaceholder(): string {
    let { showHintAsPlaceholder } = this.config;

    if (showHintAsPlaceholder === undefined) {
      showHintAsPlaceholder = this.getCommonBehavior('filter.showHintAsPlaceholder');
    }

    let defaultPlaceholder: string = '';

    if (this.filter.dataType) {
      defaultPlaceholder = `${
        includes(this.filter.dataType, ['string', 'text', 'int', 'float']) ? '请输入' : '请选择'
      }${this.filter.label || this.filter.name}`;
    }

    const placeholder = this.filter.placeholder || defaultPlaceholder;

    return showHintAsPlaceholder ? this.filter.hint || placeholder : placeholder;
  }

  protected onChange(value: ValueType): void {
    this.$emit('change', value);
  }
}
